<template>
  <div class="footer">
    <div
        v-for="(item, index) in menuItems"
        :key="index"
        :class="['item', { active: activeIndex === index }]"
        @click="() => { change(index); navigateTo(item.route); }"
    >
      <img :src="require('@/assets/footer/'+item.icon +'.svg')" alt=""     >
      <span>{{ item.text }}</span>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import {useRouter} from "vue-router";
const router =  useRouter();
const activeIndex = ref(0); // 默认激活第一个菜单项

const menuItems = [
  { icon:'file-earmark-bar-graph', text: '行情',route:'/home' },
  { icon: 'currency-exchange', text: '币币' ,route: '/coin'},
  { icon: 'menu-down', text: '合约' ,route: 'contract'},
  { icon: 'chat-square-text-fill', text: '币圈' ,route:'/news'},
  { icon: 'wallet-fill', text: '钱包',route:'/wallet' }
];

function change(index) {
  activeIndex.value = index;
}
function navigateTo(route){
  router.push(route)
}
</script>
<style scoped>
.footer {
  width: 99%;
  height: 50px;
  background-color: #409EFF;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 移除 space-between */
  border-radius: 20px;
  bottom: 0;
  z-index: 10000;
}

.item {
  display: flex; /* 保持 flex 布局 */
  flex-direction: column; /* 设置为垂直排列 */
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
  flex-grow: 1;
  margin: 0 10px;
  transition: background-color 0.3s; /* 添加过渡效果 */
  cursor: pointer; /* 改变鼠标样式 */
}

.item.active {
  background-color: whitesmoke; /* 激活状态的背景颜色 */
}

.item img {
  margin-bottom: 5px; /* 图片与文字之间的间隔 */
}

.item span {
  margin-top: 5px; /* 文字与图片之间的间隔 */
}
</style>